<template>
  <h1>一个人的信息</h1>
  <h2 v-show="person.name">姓名：{{ person.name }}</h2>
  <h2>年龄：{{ person.age }}</h2>
  <h2 v-show="person.gender">性别：{{ person.gender }}</h2>
  <h2>工作种类：{{person.job.type}}</h2>
  <h2>工作薪水：{{person.job.salary}}</h2>
  <h2>爱好：{{person.hobby}}</h2>
  <button @click="changeInfo">修改信息</button>
  <button @click="addGender">添加性别</button>
  <button @click="deleteName">删除姓名</button>
</template>

<script>
import {ref, reactive} from "vue";

export default {
  name: "App",
  setup() {
    let person = reactive({
      name:'张三',
      age:18,
      job:{
        type:'前端工程师',
        salary:3000,
        a:{
          b:{
            c:666
          }
        }
      },
      hobby:['抽烟', '喝酒', '烫头']
    });

    function changeInfo() {
      person.name = '李四';
      person.age = 48;
      person.job.type = 'UI设计师';
      person.job.salary = 4000;
      person.job.a.b.c = 777;
      person.hobby[0] = '睡觉';
    }

    function addGender() {
      person.gender = '男';
    }

    function deleteName() {
      delete person.name;
    }

    return {
      person,
      changeInfo,
      addGender,
      deleteName
    };
  },
}
</script>

<style scoped>

</style>